<template>
    <div class="project-management-container">
      <el-button type="primary" @click="openDialog">创建项目</el-button>
      <div class="project-cards">
        <el-card v-for="(project, index) in projects" :key="index" class="project-card">
          <div class="project-info">
            <p><strong>项目名称：</strong>{{ project.projectName }}</p>
            <p><strong>评估方法：</strong>{{ project.evaluationMethod }}</p>
            <p><strong>计算模型：</strong>{{ project.calculationModel }}</p>
            <p><strong>项目状态：</strong>{{ project.status }}</p>
          </div>
          <el-button v-if="project.status === '未提交'" type="primary" @click="submitProject(index)">评估</el-button>
        </el-card>
      </div>
  
      <el-dialog :visible.sync="dialogVisible" title="创建新项目" width="50%">
        <el-form :model="form" label-width="120px" :rules="rules" ref="form" status-icon>
          <el-form-item label="项目名称" prop="projectName" required>
            <el-input v-model="form.projectName" placeholder="请输入项目名称"></el-input>
          </el-form-item>
          
          <el-form-item label="评估方法" prop="evaluationMethod" required>
            <el-select v-model="form.evaluationMethod" placeholder="请选择评估方法">
              <el-option label="估算功能点法" value="method1"></el-option>
              <el-option label="方法二" value="method2"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="计算模型" prop="calculationModel" required>
            <el-select v-model="form.calculationModel" placeholder="请选择计算模型">
              <el-option label="智谱清言（推荐）" value="model1"></el-option>
              <el-option label="Chatgpt" value="model2"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="上传文件" prop="fileList">
            <el-upload
              action="#"
              :before-upload="beforeUpload"
              :on-change="handleFileChange"
              :file-list="fileList"
              accept=".doc,.docx"
              :limit="1"
            >
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="submitForm">确定</el-button>
            <el-button @click="closeDialog">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    name: 'ProjectManagement',
    data() {
      return {
        dialogVisible: false,
        form: {
          projectName: '',
          evaluationMethod: '',
          calculationModel: '',
        },
        fileList: [],
        projects: [], // 存储项目卡片信息
        rules: {
          projectName: [
            { required: true, message: '请输入项目名称', trigger: 'blur' }
          ],
          evaluationMethod: [
            { required: true, message: '请选择评估方法', trigger: 'change' }
          ],
          calculationModel: [
            { required: true, message: '请选择计算模型', trigger: 'change' }
          ],
        }
      }
    },
    created() {
      this.fetchProjects();
    },
    methods: {
      openDialog() {
        this.dialogVisible = true;
      },
      closeDialog() {
        this.dialogVisible = false;
      },
      beforeUpload(file) {
        const isWord = file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
        if (!isWord) {
          this.$message.error('上传文件只能是 Word 格式!');
        }
        return isWord;
      },
      handleFileChange(file, fileList) {
        console.log('Uploaded file list:', fileList);
        this.fileList = fileList;
      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            // 创建新项目卡片
            const newProject = {
              projectName: this.form.projectName,
              evaluationMethod: this.form.evaluationMethod,
              calculationModel: this.form.calculationModel,
              status: '未提交'
            };
            this.projects.push(newProject); // 添加到项目列表
            this.$message.success('项目已创建');
            this.closeDialog();
            // 清空表单
            this.resetForm();
          } else {
            this.$message.error('请完整填写所有信息');
            return false;
          }
        });
      },
      resetForm() {
        this.form = {
          projectName: '',
          evaluationMethod: '',
          calculationModel: '',
        };
        this.fileList = [];
      },
      submitProject(index) {
        this.projects[index].status = '已提交';
        this.$message.success('项目已提交');
      },
      ////////////////////////////////
      fetchProjects() {
        axios.get('/api/projects')
          .then(response => {
            this.projects = response.data;
          })
          .catch(error => {
            console.error('Error fetching projects:', error);
            this.$message.error('无法加载项目数据');
          });
      }
    }
  }
  </script>
  
  <style scoped>
  .project-management-container {
    padding: 20px;
  }
  
  .project-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
  }
  
  .project-card {
    width: 300px;
    border: 1px solid #ebebeb;
    padding: 15px;
  }
  
  .project-info {
    margin-bottom: 10px;
  }
  </style>
  